<template>
  <div :class="['node_item_title_wrap', isCollapse ? '' : 'node_item__collapse']">
    <div :class="['node_item__header', activeLevel == level ? 'title_type_5' : '']" :style="{ 'padding-left': paddingLf }">
      <div :class="['node_item_title title_type', contentStyClass]" @click="changeNodeActive">{{ nodeItem.title }}</div>
      <div class="collapse" @click="changeCollapse" v-if="nodeItem.children?.length > 0">
        {{ isCollapse ? '收起' : '展开' }}
        <div style="padding-left: 10px" :class="isCollapse ? 'icon-arrow-up-bold' : 'icon-arrow-down-bold'"></div>
      </div>
    </div>
    <template v-for="item in nodeItem.children" :key="item.id">
      <TreeItem :nodeItem="item" v-if="nodeItem.children?.length > 0" :level="level + 1" />
    </template>
  </div>
</template>

<script setup>
const prop = defineProps({ nodeItem: Object, level: Number });
const { activeLevel, leafNodeChange } = inject('reserves');
const { title, nodeItem } = prop;

//样式类-内容
const contentStyClass = computed(() => {
  const classNameObj = {
    1: 'title_type_1',
    2: 'title_type_2',
    3: 'title_type_3',
    4: 'title_type_4'
  };
  return classNameObj[nodeItem.type];
});
//动态内边距
const paddingLf = computed(() => prop.level * 10 + 'px');

/*折叠菜单*/
const isCollapse = ref(true);
function changeCollapse() {
  isCollapse.value = !isCollapse.value;
}

/*最后节点的点击事件*/
function changeNodeActive() {
  //最后节点children为null
  if (prop.nodeItem.children == null) {
    if (activeLevel == prop.level) {
      return;
    } else {
      activeLevel.value = prop.level;
      playCallback();
    }
  }
}

/*触发回调*/
function playCallback() {
  leafNodeChange(prop.nodeItem.id);
}
</script>
